/** 设置滚动条 */
::-webkit-scrollbar { width: 3px;height: 3px; }
::-webkit-scrollbar-track {background: #fff;} 
::-webkit-scrollbar-track:hover {background: #eee;}
::-webkit-scrollbar-thumb {border-radius: 10px;background: #b9b9b9;}
::-webkit-scrollbar-thumb:hover {background: #747474;}
::-webkit-scrollbar-thumb:active {background: #555;}

/** 居中*/
.center{display: flex;align-items: center;}
.content-center{display: flex;align-items: center;justify-content: center;}
.content-between{display: flex;align-items: center;justify-content: space-between;}


/***放大动画***/
.scale-enter-active {animation: scale 0.3s cubic-bezier(.17,.84,.44,1);}
.scale-leave-active {animation: scale2 0.4s cubic-bezier(.17,.84,.44,1);}
@keyframes scale {0%{transform: scale(0); opacity: 0;}100%{transform: scale(1); opacity: 1;}}
@keyframes scale2 {0%{ transform: translateY(0)}100%{transform: translateY(100%)}}

/***放大动画2***/
.scale2-enter-active {animation: scale22 0.3s cubic-bezier(.17,.84,.44,1);}
.scale2-leave-active {animation: scale21 0.4s cubic-bezier(.17,.84,.44,1);}
@keyframes scale22 {0%{transform: scale(0) translateY(-50%); opacity: 0;}100%{transform: scale(1) translateY(-50%); opacity: 1;}}
@keyframes scale21 {0%{ transform: scale(1) translateY(-50%);opacity:1;}100%{transform: scale(0) translateY(-50%); opacity: 0;}}

/***放大动画3***/
.scalec-enter-active {animation: scalec1 0.3s cubic-bezier(.17,.84,.44,1);}
.scalec-leave-active {animation: scalec2 0.3s cubic-bezier(.17,.84,.44,1);}
@keyframes scalec1 {0%{transform: scale(0); opacity: 0;}100%{transform: scale(1); opacity: 1;}}
@keyframes scalec2 {0%{ transform: scale(1) ;opacity:1;}100%{transform: scale(0); opacity: 0;}}


/***由下向上动画***/
.bottomUp-enter-active {animation: bottomUp 0.3s cubic-bezier(.17,.84,.44,1);}
.bottomUp-leave-active {animation: bottomUpDown 0.4s cubic-bezier(.17,.84,.44,1);}
@keyframes bottomUp {0%{transform:translateY(100%);}100%{transform:translateY(0)}}
@keyframes bottomUpDown {0%{ transform: translateY(0)}100%{transform: translateY(100%)}}

/***渐渐显示动画***/
.mask-enter-active {animation: fadeIn 0.3s;}
.mask-leave-active {animation: fadeOut 0.3s;}
@keyframes fadeIn {0%{opacity:0;}100%{opacity:1;}}
@keyframes fadeOut {0%{opacity: 1}100%{opacity:0;}}

/***渐渐右向左动画***/
.right-enter-active {animation: fadeRight 0.3s  cubic-bezier(.17,.84,.44,1);}
.right-leave-active {animation: fadeOutRight 0.3s  cubic-bezier(.17,.84,.44,1);}
@keyframes fadeRight {0%{ transform: translateX(100%) }100%{ transform:translateX(0%);}}
@keyframes fadeOutRight {0%{transform: translateX(0)}100%{transform: translateX(100%)}}

/***渐渐左向右动画***/
.bgLeft-enter-active {animation: fadeLeft 0.3s  cubic-bezier(.17,.84,.44,1);}
.bgLeft-leave-active {animation: fadeOutLeft 0.3s  cubic-bezier(.17,.84,.44,1);}
@keyframes fadeLeft {0%{ transform: translateX(-100%) }100%{ transform:translateX(0%);}}
@keyframes fadeOutLeft {0%{transform: translateX(0)}100%{transform: translateX(-100%)}}

/***渐渐向下动画***/
.slideDown-enter-active {animation: slideDown 0.3s  cubic-bezier(.17,.84,.44,1);}
.slideDown-leave-active {animation: slideUp 0.3s  cubic-bezier(.17,.84,.44,1);}
@keyframes slideDown {0%{ min-height:0rem; height:0rem; }100%{ min-height:auto; height: 100%;}}
@keyframes slideUp {0%{min-height:auto; height: 100%;}100%{min-height:0rem; height:0rem;}}

/***渐渐向下动画2小***/
.aniup-enter-active {animation: aniup 0.3s  cubic-bezier(.17,.84,.44,1);}
@keyframes aniup {0%{ transform: translateY(50%); }100%{ transform: translateY(0); }}


.control-box{position: relative;
    &:hover .control{opacity: 1;z-index: 3;}
    .control{position: absolute;bottom: 0;right: 0;opacity: 0;cursor: pointer;transition: all .3s;
        li{background: rgba($color: #000000, $alpha: .7);color: #fff;margin-left: 3px;padding: 1px;}
    }
    .module_bg{position: absolute;left: 0;top: 0;bottom: 0;right: 0;}
}

// 隐藏显示多少行
.ellipsis{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;word-break: break-all;
    @for $i from 2 through 100
    {
        &.ellipsis-#{$i}{
            -webkit-line-clamp: $i;
        }
    }
    &-no{
        display: block;
    }
}